<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/template/template2.xhtml">

	<ui:define name="content1">
		<h:form id="form">
			<p:growl id="messages" showDetail="true" />
			<div class="container">

				<p:dataTable
					style="margin-left:auto !important; margin-right:auto !important;"
					id="roomTable" value="#{houseBean.rooms}" var="room"
					editable="true" editMode="cell">

					<p:ajax event="cellEdit" listener="#{houseBean.updateRooms}"
						update="roomTable" />

					<p:column headerText="Room" style="width:20% !important">

						<h:outputText value="#{room.type}" />

					</p:column>

					<p:column headerText="Size" style="width:20% !important">

						<h:outputText value="#{room.size}" />
					</p:column>

					<p:column headerText="Temperature" style="width:20% !important">
						<p:cellEditor rendered="#{houseBean.loggedUserPrivilege.temp}">
							<f:facet name="output">
								<h:outputText value="#{room.temperature}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText id="temp" value="#{room.temperature}" />

								<p:slider for="temp" minValue="-10" maxValue="40" />

							</f:facet>
						</p:cellEditor>
						<h:outputText rendered="#{!houseBean.loggedUserPrivilege.temp}"
							value="#{room.temperature}" />
					</p:column>

					<p:column headerText="Light" style="width:20% !important">
						<p:cellEditor rendered="#{houseBean.loggedUserPrivilege.lights}">
							<f:facet name="output">
								<h:outputText value="#{room.light}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText id="light" value="#{room.light}" />

								<p:slider for="light" minValue="0" maxValue="100" />
							</f:facet>
						</p:cellEditor>
						<h:outputText rendered="#{!houseBean.loggedUserPrivilege.lights}"
							value="#{room.light}" />
					</p:column>



					<p:column headerText="Manage" style="width:20% !important">

						<h:commandButton id="img" class="editBtn"
							disabled="#{!houseBean.loggedUserPrivilege.roomEl}"
							actionListener="#{houseBean.toggleSelectedRoom}" title="Manage">
							<p:ajax update=":form" />
							<f:attribute name="roomId" value="#{room.roomId}" />
						</h:commandButton>

					</p:column>

				</p:dataTable>
			</div>
			<br />
			<div class="container">
				<p:dataTable
					style="margin-left:400px !important;margin-right:400px !important;"
					id="elecTable" var="elec"
					value="#{houseBean.selectedRoomElectronics}"
					rendered="#{houseBean.selectedRoom != 0}" editable="true"
					editMode="cell">
					<f:facet name="header">
						<h:outputText value="#{houseBean.selectedRoomName}" />
					</f:facet>
					<p:ajax event="cellEdit" listener="#{houseBean.updateElectronics}"
						update="elecTable" />

					<p:column headerText="Type" style="width:50% !important">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{elec.type}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{elec.type}" style="width:200px !important" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="Power" style="width:50% !important">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{elec.power}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText id="powerTxt" value="#{elec.power}" />
								<p:slider for="powerTxt" min="0" max="100"
									style="width:200px !important" />
							</f:facet>
						</p:cellEditor>

					</p:column>


				</p:dataTable>
			</div>
		</h:form>
	</ui:define>

</ui:composition>
